<template>
    <div>
<!--        头部-->
        <HeaderTitle flagCourse="false"></HeaderTitle>
        <!-- 中间区域 -->
        <section id="middle">
            <div id="middleBox">
                <div id="middleTop">
                    <img src="../../images/房子.png" alt="">
                    <span>首页</span><span>&nbsp;/&nbsp;</span><span>视频详情</span>
                </div>
                <div id="profession">
                    <div id="professionBox">
                        <div id="professionImg">
                            <img :src='courseImg' alt="">
                        </div>
                        <div id="professionBox2">
                            <p id="professionBoxP1">{{courseTitle}}</p>
                            <p id="professionBoxP2">累计{{courseStudy}}人学习</p>
                            <p id="professionBoxP3">免费</p>
                            <button id="professionBox2-btn">立即观看</button>
                        </div>
                        <div id="collect">
                            <a href="">
                                <img src="../../images/爱心.png" alt="">
                                <span>收藏</span>
                            </a>

                        </div>
                    </div>
                </div>
                <div id="middleTab">
<!--                    <div id="middleTabTop">-->
<!--                        <span>课程描述</span>-->
<!--                        <span>目录</span>-->
<!--                    </div>-->
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="课程描述" name="first" v-html="courseText"></el-tab-pane>
                        <el-tab-pane label="目录" name="second">
                            <div v-for="(item,index) in courseClassList" :key="index">
                                <p class="courseBigTitle">{{(index+1)+"."+item.sectionName}}</p>
                                <p v-for="(value,index2) in item.subSections" :key="index2" class="courseSmallTitle">
                                    {{((index+1)+"-"+(index2+1))+"&nbsp;&nbsp;"+value.sectionName}}
                                </p>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="评论" name="third">
                            <div class="courseComment">
                                <div class="courseCommentTitle">
                                    <p>评论</p>
                                    <div class="block">
                                        <el-rate v-model="value1" class="starStar"></el-rate>
                                        <span class="demonstration">非常好</span>
                                    </div>
                                </div>
                                <div class="courseCommentBody">
                                    <div>
                                        <input type="text" placeholder="请发表您对课程的评价" class="courseCommentBodyInput">
                                    </div>
                                    <button class="courseCommentBtn">发表评论</button>
                                </div>
                                <hr style="margin: 20px 0px; height: 1px; border: 0px; background-color: rgb(232, 232, 232); color: rgb(232, 232, 232);">
                                <div class="courseCommentReal" v-for="(item1,i) in commentList" :key="i">
                                    <div class="courseCommentRealTitle">
                                        <div>
                                            <span><img :src="item1.user.avatarUrl" alt="" class="commentHeaderImg1"></span >
                                            <span>{{item1.user.nickname}}</span>
                                            <div class="block block2">
                                                <el-rate v-model="value1" class="starStar"></el-rate>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="courseCommentRealComment1">
                                        {{item1.commentContent}}
                                    </p>
                                    <p class="courseCommentRealTime">
                                        <span>{{item1.createdTime}}</span>
                                        <a href="#">回复</a>
                                    </p>
                                    <div class="courseCommentRealComment2" v-if="item1.subCommentList.length !=0">
                                        <div class="courseCommentRealComment2Inner" v-for="(valueInner,indexInner) in item1.subCommentList" :key="indexInner">
                                            <span><img :src="valueInner.user.avatarUrl" alt="" class="commentHeaderImg1"></span>
                                            <span>{{valueInner.user.nickname}}回复{{item1.user.nickname}}：{{valueInner.commentContent}}</span>
                                            <div class="courseCommentRealTime">
                                                <span>
                                                    {{valueInner.createdTime}}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <hr style="margin: 20px 0px; height: 1px; border: 0px; background-color: rgb(232, 232, 232); color: rgb(232, 232, 232);">
                                </div>

                                <div class="block">
                                    <el-pagination
                                            layout="prev, pager, next"
                                            :total="toTal"
                                            @current-change="pageTurning"
                                    >
                                    </el-pagination>
                                </div>
                            </div>

                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>

        </section>
<!--        底部区域-->
        <foot></foot>
    </div>
</template>

<script>
    import foot from "../../components/foot";
    import HeaderTitle from "../../components/headerTitle";
    export default {
        name: "courseDetial",
        components:{
            HeaderTitle,
            foot
        },
        data(){
            return{
                courseId:'',
                activeName: 'first',
                courseImg:'',
                courseText:"",
                courseStudy:"",
                courseTitle:"",
                courseClassList:[],
                commentList:[],
                toTal:0,
                //星星数量
                value1: 5,
                colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
                flagCourse:false
            }
        },
        methods:{
            pageTurning(page){
                this.axios.get("http://wkt.myhope365.com/pc/comment/commentList/course/"+this.courseId+`?pageSize=10&pageNum=${page}`).then(res=>{
                    // console.log(res.data.rows)
                    this.commentList = res.data.rows
                    this.toTal = res.data.total
                    console.log(res)
                })
            }
        },
        created() {
            this.$route.query
            this.courseId = this.$route.query.id
            // console.log(this.courseId)
            this.axios.get("http://wkt.myhope365.com/pc/course/detail/"+this.courseId).then(res=>{
                this.courseImg = res.data.data.bannerFileUrl
                this.courseText = res.data.data.courseDetail
                this.courseStudy = res.data.data.participationsCount
                this.courseTitle = res.data.data.courseTitle
                this.courseClassList = res.data.data.sections
                // console.log(this.courseClassList)
                // console.log(res.data.data.sections)
                // console.log(res.data.data)
                // console.log(this.courseImg.bannerFileUrlPc)
            })
            this.pageTurning(1)
        }
    }
</script>

<style scoped>
    *{
        /*background-color: #f4f4f4;*/
    }
    /* 中间区域 */
    #middle{
        /* height: 530px; */
        /*margin: auto;*/
        padding-bottom: 40px;
        /*overflow: hidden;*/
        background-color: #f4f4f4;

    }
    #middleBox{
        margin: auto;
        width: 1200px;
        box-sizing: border-box;
        /* height: 485px; */
        /* background-color: blue; */
        /* border: 1px solid blue; */
    }

    #middleTop{
        display: block;
        width: 1195px;
        height: 41px;
        line-height: 41px;
        background-color: #f4f4f4;
        text-align: left;
        position: relative;
    }
    #middleTop>img {
        position: absolute;
        top: 10px;
    }
    #middleTop span{
        color: rgba(0,0,0,.45);
        line-height: 100%;
        font-size: 14px;
    }
    #middleTop span:nth-of-type(1) {
        margin-left: 20px;
    }
    #middleTop span:hover{
        cursor: pointer;
        color: #23db9b;
    }
    #profession{
        overflow: hidden;
        width: 1200px;
        height: 271px;
        background-color: #fff;

    }
    #professionBox{
        overflow: hidden;
        float: left;
        width: 1160px;
        height: 271px;
        padding: 20px 20px;

    }
    #professionImg{
        float: left;
        margin-right: 40px;
    }
    #professionImg img{
        width: 330px;
        height: 220px;
    }
    #professionBox2{
        float: left;
        text-align: left;
        width: 635px;
        height: 230px;
    }
    #professionBoxP1{
        font-size: 24px;
        margin: 10px 0;
    }
    #professionBoxP2{
        margin-top: 20px;
        font-size: 14px;
        color: #999;
    }
    #professionBoxP3{
        font-size: 24px;
        color: #00cf8c;
        margin-top: 20px;
    }
    #professionBox2-btn{
        width: 160px;
        height: 45px;
        margin-top: 20px;
        background-color: #00cf8c;
        border: 0;
        color: #fff;
        font-size: 18px;
    }
    #professionBox2-btn:hover{
        cursor: pointer;
        background-color: #23db9b;
    }
    #collect{
        width: 110px;
        height: 30px;
        border: 1px solid #999;
        float: right;
        text-align: center;
        position: relative;
    }
    #collect img{
        /*padding-left: 25px;*/
        /*margin-top: 5px;*/
        top: 6px;
        position: absolute;
    }
    #collect span{
        padding-left: 20px;
        color: #999;
        text-align: center;
        line-height: 30px;
    }
    #collect a{
        text-decoration: none;
    }
    #middleTab{
        margin-top: 20px;
        background-color: #fff;
        width: 1200px;

        overflow: hidden;
    }
    #middleTabTop{
        width: 1160px;
        height: 43px;
        margin: auto;
        border-bottom: 1px solid #999;
    }
    #middleTabTop span{
        margin-right: 30px;
        line-height: 43px;
        padding: 12px 16px;
        font-size: 14px;
        color: rgba(0,0,0,.65);
    }
    #middleTabTop span:hover{
        color: #00cf8c;
        cursor: pointer;
    }
    #middleTabTop span:nth-child(1){
        border-bottom: 2px solid #00cf8c;
        color: #00cf8c;
    }
    #cons{
        width: 1200px;
        /* height: 160px; */
        /* overflow: hidden; */

    }
    .slides{
        position:relative;
        width: 2400px;
    }
    #tapText1{
        float: left;
        width: 1140px;
        padding: 30px;
        color: rgba(0,0,0,.65);
        font-size: 14px;
        /* position: relative; */
    }
    .tapText2{
        float: left;
        width: 1140px;
        font-size: 22px;
        padding: 30px;
        display: none;
    }
    .tapText2_Btn{
        width: 87px;
        height: 30px;
        float: right;
        background-color: rgb(45, 183, 245);
        color: #fff;
        border: 0;
    }
    .tapText2_Btn:hover{
        cursor: pointer;
    }
    .tapText2_Box{
        width: 1100px;
        height: 30px;
        margin: 10px auto;
        padding: 10px 20px;
        background-color: #f2f2f2;
    }
    .tapText2_Box p{
        font-size: 14px;
        color: rgba(0,0,0,.65);
    }
    .courseBigTitle {
        padding: 5px 0 5px 10px;
        width: 1110px;
        font-size: 22px;
        font-weight: 500;
        /*height: 33px;*/
    }

    .courseSmallTitle {
        padding: 10px 20px;
        margin: 10px 0;
        width: 1080px;
        height: 30px;
        font-weight: normal;
        background-color: #f2f2f2;
    }
    .courseComment {
        padding: 0 30px;
    }
    .courseCommentTitle {
        width: 1120px;
        height: 71px;
    }
    .starStar {
        float: left;
    }
    .demonstration {
        margin-left: 10px;
    }
    .block {
        margin-top: 20px;
    }
    .courseCommentBody {
        width: 1120px;
        height: 188px;
    }
    .courseCommentBody>div {
        padding: 4px 11px;
        width: 1080px;
        height: 126px;
        border: 1px solid #d9d9d9;
        box-sizing: border-box;
    }
    .courseCommentBodyInput {
        height: 30px;
        border: 0;
        outline: none;
        font-size: 16px;
    }
    .courseCommentBtn{
        margin: 20px 40px 0 0;
        width: 88px;
        height: 32px;
        float: right;
        background-color: #23db9b;
        border: #23db9b;
        color: #fff;
    }
    .courseCommentReal {
        width: 1120px;
    }
    .courseCommentRealTitle {
        width: 1200px;
        height: 32px;
    }
    .courseCommentRealTitle>span {
        margin-left: 5px;
    }
    .courseCommentRealComment1{
        padding: 10px 0 10px 40px;
        width: 1080px;
        height: 20.8px;
    }
    .courseCommentRealTime {
        text-align: right;

    }
    .courseCommentRealComment2 {
        padding: 10px;
        margin: 20px 40px 0 0;
        width: 1058px;
        /*height: 70.8px;*/
        border: 1px solid #d9d9d9;
        background-color: #fafafa;
    }
    .courseCommentRealComment2Inner {
        padding-bottom: 10px;
        margin-top: 8px;
        width: 1058px;
        height: 52.8px;
        border-bottom: 1px solid #d9d9d9;
    }
    .courseCommentRealComment2Inner:nth-last-of-type(1) {
        border-bottom: 0;
    }
    .courseCommentRealComment2Inner>span {
        margin-left: 5px;
    }
    .commentHeaderImg1 {
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }
    .block2 {
        float: right;
        margin-right: 75px;
    }
</style>